<html>
    <head>
        <title>editor 组件</title>
    </head>
    <body>
        <script>
            // editor 组件

                        // https://uniapp.dcloud.net.cn/component/editor.html

                        /*
                            一、概述

                                      富文本编辑器，可以对图片、文字格式进行编辑和混排
                                      
                                      在web开发时，可以使用contenteditable来实现内容编辑。但这是一个dom API，在非H5平台无法使用。

                                      于是微信小程序和uni-app的App-vue提供了editor组件来实现这个功能，并且在uni-app的H5平台也提供了兼容。

                                      从技术本质来讲，这个组件仍然运行在视图层webview中，利用的也是浏览器的contenteditable功能。

                                      编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。

                                      通过setContents接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在应用内使用时通过 delta 进行插入。


                                      富文本组件内部引入了一些基本的样式使得内容可以正确的展示，开发时可以进行覆盖。

                                      需要注意的是，在其它组件或环境中使用富文本组件导出的html时，
                                      
                                      需要额外引入这段样式，并维护<ql-container><ql-editor></ql-editor></ql-container>的结构，
                                      
                                      参考：使用 editor 组件导出的 html。  https://ask.dcloud.net.cn/article/36205

                                      图片控件仅初始化时设置有效。
                        */

                        /*
                            二、平台兼容性

                                       App	       H5	    微信小程序	     支付宝小程序	百度小程序	              抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	元服务	小红书小程序
                                     
                                       2.0+，     2.4.5+	  基础库 2.7.0+	      x	            需引入动态库引入方式	  x	                        x	       x	   x	      x	          x	       √ 
                                      app-vue	

                                   ★、editor组件目前只有H5、App的vue页面、微信小程序、百度小程序支持，其他端平台自身未提供editor组件，
                                        只能使用web-view加载web页面，也可搜索插件市场 获取简单的markdown富文本编辑器

                                   ★、百度平台需引入动态库引入方式
                        */
                        
                        /*
                            三、属性说明

                                        属性	            类型	        默认值	必填	    说明

                                    1、read-only	        boolean	        false	否	    设置编辑器为只读

                                    2、placeholder	        string		            否	    提示信息

                                    3、show-img-size	    boolean	        false	否	    点击图片时显示图片大小控件

                                    4、show-img-toolbar	    boolean	        false	否	    点击图片时显示工具栏控件

                                    5、show-img-resize	    boolean	        false	否	    点击图片时显示修改尺寸控件

                            ----------- 以下为事件绑定属性 -------

                                    6、@ready	            eventhandle		        否	    编辑器初始化完成时触发

                                    7、@focus	            eventhandle		        否	    编辑器聚焦时触发，event.detail = {html, text, delta}

                                    8、@blur	            eventhandle		        否	    编辑器失去焦点时触发，detail = {html, text, delta}

                                    9、@input	            eventhandle		        否	    编辑器内容改变时触发，detail = {html, text, delta}

                                    10、@statuschange	    eventhandle		        否	    通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式
                        */

                        /*
                            四、HTML 标签和 style 内联样式支持情况

                                    编辑器内支持部分 HTML 标签和内联样式，不支持class和id

                                    <1>、支持的标签

                                            不满足的标签会被忽略，<div>会被转换为 <p> 存储

                                                    类型	节点	                                                                                    平台差异说明

                                               1、行内元素	<span> <strong> <b> <ins> <em> <i> <u> <a> <del> <s> <sub> <sup> <img>	其中<ins> <del>     百度小程序不支持

                                               2、 块级元素	<br> <p> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <ol> <ul> <li>	                                其中<br>仅百度小程序支持、<p> 百度小程序不支持


                                    <2>、支持的内联样式

                                                内联样式仅能设置在行内元素或块级元素上，不能同时设置。例如 font-size` 归类为行内元素属性，在 p 标签上设置是无效的。


                                                类型	    样式	                                                                    平台差异说明
                                                
                                            1、块级样式	    text-align、direction、margin、margin-top、margin-left、margin-right
                                                            margin-bottom、padding、padding-top、padding-left、padding-right、
                                                            padding-bottom、line-height、text-indent	                               百度小程序仅支持text-align、direction

                                            2、行内样式	    font、font-size、font-style、font-variant、font-weight、font-family
                                                           letter-spacing text-decoration color background-color	                   百度小程序仅支持color、background-color
                        */
        </script>
    </body>
</html>